<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Power Master Admin</title>
		<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
		<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
		<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
	</head>
	<body>

		<div id="root"></div>

		<script type="text/babel">
            class DeviceStatus extends React.Component {
                constructor(props) {
                    super(props);
                }

                render() {
                    return (
                        <tr>
                            <td>{this.props.device.id} </td>
                            <td>{this.props.device.power} </td>
                            <td>{this.props.device.freq} </td>
                            <td>{this.props.device.available.toString()} </td>
                        </tr>
                    )
                }
            }

            class PowerStatus extends React.Component {
                constructor(props) {
                    super(props);
                    this.state = {
                        devices: []
                    };
                }

                componentDidMount() {
                    this.tick();

                    this.timer = setInterval(() => this.tick(), 5000);
                }

                componentWillUnmount() {
                    clearInterval(this.timer);
                }

                tick() {
                    fetch('/v1/powermaster/devices/', {
                        mode: 'cors',
                        headers: {
                            // 'Content-Type': 'application/json',
                            // 'Accept': 'application/json',
                            // 'Access-Control-Allow-Origin':'*',
                        }})
                    .then(response => response.json())
                    .then(data => {
                        this.setState({
                            // devices: JSON.stringify(data.infos, null, 2)
                            devices: data.status
                        });
                    });
                }

                cap = () => {
                    fetch('/v1/powermaster/devices/' + this.refs.id.value, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify({
                            power: this.refs.power.value,
                            freq: this.refs.freq.value
                        })
                    })
                    .then(response => response.json());
                }

                apply_strategy = (strategy) => {
                    fetch('/v1/powermaster/strategies/', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify({
                            strategy: strategy,
                            strength: Number(this.refs.strength.value)
                        })
                    })
                    .then(response => response.json());
                }

                render() {
                    return (
                        <div>
                            <div id="navigation">
                            </div>

                            <div id="strategies">
                                <label>Strength: </label> <input type="text" ref="strength"></input>
                                <br />
                                <button onClick={this.apply_strategy.bind(this, 1)}>cap</button>
                                <button onClick={this.apply_strategy.bind(this, 2)} disabled="true">thread</button>
                                <button onClick={this.apply_strategy.bind(this, 3)}>hibernate</button>
                            </div>

                            <br />
                            <div id="status">
                                <table>
                                    <tbody>
                                        <tr>
                                            <th>ID</th>
                                            <th>Power</th>
                                            <th>Freq</th>
                                            <th>Avaiable</th>
                                        </tr>
                                        {this.state.devices.map((device) => <DeviceStatus key={device.id} device={device} />)}
                                    </tbody>
                                </table>
                                <br />
                                <select ref="id">
                                    {this.state.devices.map((device) => <option key={device.id} value={device.id}>{device.id}</option>)}
                                </select>
                                <input type="text" ref="power"></input>
                                <input type="text" ref="freq"></input>
                                <button onClick={this.cap}>cap</button>
                            </div>
                        </div>
                    );
                }
            }

            ReactDOM.render(<PowerStatus />, document.getElementById('root'));
		</script>

	</body>
</html>
